<template>
<div>
  <el-form ref="form" :model="user" label-width="80px" style="padding-left: 100px;padding-top: 30px">
    <el-form-item label="昵称" >
      <el-input v-model="user.nickname" style="width: 200px;position: absolute;left: 30px;"></el-input>
    </el-form-item>
    <el-form-item label="介绍">
      <el-input type="textarea" v-model="user.introduction" style="width: 200px;position: absolute;left: 30px;"></el-input>
    </el-form-item>
    <el-form-item label="性别">
      <el-radio-group v-model="user.sex" style="position: absolute;left: 30px;top: 12px">
        <el-radio label="1">男</el-radio>
        <el-radio label="2">女</el-radio>
        <el-radio label="">保密</el-radio>
      </el-radio-group>
    </el-form-item>
    <el-form-item label="生日" >
      <el-date-picker
          style="position: absolute;left: 30px;"
          v-model="user.birthday"
          type="date"
          placeholder="选择日期">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="地区">
      <el-input v-model="user.city" style="width: 200px;position: absolute;left: 30px;"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary"    style="position: absolute;left: 30px;" @click="updateMine">保存</el-button>
      <el-button  style="position: absolute;left: 130px;">取消</el-button>
    </el-form-item>
  </el-form>
<!--  <div style="width: 360px;height: 300px;position: absolute;left: 900px;top: 200px">-->
<!--    <el-image v-if="user.img"  v-model="user.img" :src="$axios.defaults.baseURL + user.img" class="avatar" style="height: 100%;" />-->
<!--  </div>-->
  <el-upload
      style="width: 360px;height: 500px;position: absolute;left: 900px;top: 200px"
      class="avatar-uploader"
      :action="$axios.defaults.baseURL + '/api/file/upload'"
      :show-file-list="false"
      :on-success="uploadSuccess">
      <div style="width: 360px;height: 300px">
        <el-image v-if="user.img"  v-model="user.img" :src="$axios.defaults.baseURL + user.img" class="avatar" style="height: 100%;" />
      </div>
  </el-upload>
</div>
</template>

<script>
export default {
  name: "management",
  data() {
    return {
      form: {
        delivery: false,
        type: [],
        resource: '',
        desc: '',
      },
      user:{},
      value1: '',
    }
  },
  created() {
    this.getMyInfo();

  },

  methods: {

        getMyInfo() {
      this.$axios.get('/api/user/mine/info').then(res => {
        console.log(res)
        this.user = res.data.data;
        localStorage.setItem('TOKEN', res.data.data.token);
        localStorage.setItem('USER_NAME', res.data.data.name);
        localStorage.setItem('USER_CITY', res.data.data.city);
        localStorage.setItem('USER_NICKNAME', res.data.data.nickname);
        localStorage.setItem('USER_SEX', res.data.data.sex);
        localStorage.setItem('USER_BIRTHDAY', res.data.data.birthday);
        localStorage.setItem('USER_INTRODUCTION', res.data.data.introduction);
        localStorage.setItem('USER_IMG', res.data.data.img);
      })
    },
    updateMine() {
      this.$axios.post('/api/user/mine', this.user).then(res => {
        if (res.data.status === 1){
          // 修改成功，更新一下缓存里的信息
          localStorage.setItem('TOKEN', res.data.data.token);
          localStorage.setItem('USER_NAME', res.data.data.name);
          localStorage.setItem('USER_SEX', res.data.data.sex);
          localStorage.setItem('USER_BIRTHDAY', res.data.data.birthday);
          localStorage.setItem('USER_CITY', res.data.data.city);
          localStorage.setItem('USER_INTRODUCTION', res.data.data.introduction);
          localStorage.setItem('USER_NICKNAME', res.data.data.nickname);
          localStorage.setItem('USER_IMG', res.data.data.img);
          // 刷新页面
          this.$router.go(0);
        }
      })
    },
    uploadSuccess(res) {
      this.user.img = res.data.url;
      this.$forceUpdate();
    }
  }
}
</script>

<style scoped>

</style>